<template>
    <div class="content">
        <div class="item" v-for="i in recommendInfo" :key="i.ID">
            <div class="title"><span></span> {{ i.yyj_jing_qu }}</div>
            <div class="img">
                <span v-for="j in i.img">
                    <img :src="j" alt="">
                </span>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useScenicStore } from '@/stores/modules/scenic';
const scenicStore = useScenicStore()


let recommendInfo = ref<any>([])
const getRecommendInfo = async () => {
    recommendInfo.value = (await scenicStore.getRecommend()).data
}

onMounted(() => {
    getRecommendInfo()
})
</script>

<style scoped lang="scss">
.content {
    width: 100%;

    .item {
        width: 100%;

        .title {
            font-weight: 500;
            font-size: 15px;
            display: flex;
            align-items: center;

            span {
                display: block;
                width: 4px;
                height: 25px;
                background-color: orange;
                margin-right: 15px;
            }
        }

        .img {
            display: flex;
            margin: 15px 0;
            height: 180px;
            width: 100%;

            span {
                display: block;
                margin-right: 10px;
                width: 24%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>